// frontend/src/admin/Dashboard.js

import React, { useState, useEffect, useCallback } from 'react';
import { Card, Col, Row, Statistic, message } from 'antd';
import { HomeOutlined, CheckSquareOutlined, DollarOutlined } from '@ant-design/icons';
import { adminAPI } from '../services/api';

const Dashboard = () => {
    const [overview, setOverview] = useState({
        totalRooms: 0,
        availableRooms: 0,
        occupiedRooms: 0,
        todayRevenue: 0,
    });
    const [loading, setLoading] = useState(false);

    const fetchDashboardStats = useCallback(async () => {
        setLoading(true);
        try {
            // 确保请求路径正确
            const response = await adminAPI.getDashboardOverview();
            // 检查 response.data 结构，确保属性名匹配
            setOverview(response.data);
        } catch (error) {
            message.error('获取仪表盘数据失败: ' + (error.response?.data?.message || error.message));
            console.error('Error fetching dashboard stats:', error);
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        fetchDashboardStats();
    }, [fetchDashboardStats]);

    return (
        <div style={{ padding: 24 }}>
            <h2>仪表盘</h2>
            <Row gutter={16}>
                <Col span={6}>
                    <Card bordered={false}>
                        <Statistic
                            title="总房间数"
                            value={overview.totalRooms}
                            precision={0}
                            valueStyle={{ color: '#3f8600' }}
                            prefix={<HomeOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card bordered={false}>
                        <Statistic
                            title="可用房间"
                            value={overview.availableRooms}
                            precision={0}
                            valueStyle={{ color: '#0056b3' }}
                            prefix={<CheckSquareOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card bordered={false}>
                        <Statistic
                            title="入住中房间"
                            value={overview.occupiedRooms}
                            precision={0}
                            valueStyle={{ color: '#d46b08' }}
                            prefix={<HomeOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card bordered={false}>
                        <Statistic
                            title="今日收入"
                            value={overview.todayRevenue}
                            precision={2}
                            valueStyle={{ color: '#cf1322' }}
                            prefix={<DollarOutlined />}
                            loading={loading}
                        />
                    </Card>
                </Col>
            </Row>

            <div style={{ marginTop: 24 }}>
                <h3>系统概览</h3>
                <Card bordered={false}>
                    <p>欢迎使用宾馆管理系统后端</p>
                    <p>您可以通过左侧菜单导航到各个功能模块</p>
                    <p>系统状态: <span style={{ color: 'green' }}>运行正常</span></p>
                </Card>
            </div>
        </div>
    );
};

export default Dashboard;